"use client";
import { Avatar, Card, List, Typography, Tag, Space, Row, Col } from "antd";
import { UserOutlined, BookOutlined, StarOutlined } from "@ant-design/icons";
import "./index.css";
import Link from "next/link";
import { } from "react";

interface Props {
    questionBankList: API.QuestionBankVO[];
}

/**
 * 题库列表组件
 * @param props
 * @constructor
 */
const QuestionBankList = (props: Props) => {
    const { questionBankList = [] } = props;

    return (
        <div className="question-bank-list">
            <Row gutter={[24, 24]}>
                {questionBankList.map((item: API.QuestionBankVO) => (
                    <Col
                        key={item.id}
                        xs={24}
                        sm={12}
                        md={8}
                        lg={6}
                    >
                        <Card
                            className="question-bank-card"
                            cover={
                                item.picture ? (
                                    <div className="card-cover">
                                        <img alt={item.title} src={item.picture} />
                                    </div>
                                ) : (
                                    <div className="card-cover-placeholder">
                                        <BookOutlined className="placeholder-icon" />
                                    </div>
                                )
                            }
                        >
                            <Link href={`/bank/${item.id}`} className="card-link">
                                <Card.Meta
                                    avatar={
                                        <Avatar
                                            src={item.picture}
                                            icon={<BookOutlined />}
                                            size="large"
                                            className="bank-avatar"
                                        />
                                    }
                                    title={
                                        <Typography.Title
                                            level={5}
                                            ellipsis={{ rows: 1 }}
                                            className="bank-title"
                                        >
                                            {item.title}
                                        </Typography.Title>
                                    }
                                    description={
                                        <div className="bank-description">
                                            <Typography.Paragraph
                                                ellipsis={{ rows: 2 }}
                                                className="description-text"
                                            >
                                                {item.description || "暂无描述"}
                                            </Typography.Paragraph>
                                        </div>
                                    }
                                />
                            </Link>
                        </Card>
                    </Col>
                ))}
            </Row>

            {questionBankList.length === 0 && (
                <div className="empty-state">
                    <div className="empty-icon">📚</div>
                    <div className="empty-text">暂无题库数据</div>
                </div>
            )}
        </div>
    );
};

export default QuestionBankList;